<template>
  <nav class="category-nav">
    <ul>
      <button @click="toggleSelectAll">
        <svg
          class="category-icon"
          viewBox="0 0 24 24"
          width="20"
          height="20"
          fill="currentColor"
        >
          <path
            d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"
          />
        </svg>
      </button>
      <li v-for="category in categories" :key="category.id">
        <a href="#">{{ category.name }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "CategoryNav",
  data() {
    return {
      categories: [
        { id: 1, name: "狗粮" },
        { id: 2, name: "猫砂" },
        { id: 3, name: "猫粮" },
        { id: 4, name: "宠物玩具" },
        { id: 5, name: "宠物衣服" },
        { id: 6, name: "磨牙玩具" },
        { id: 7, name: "棉质玩具" },
      ],
    };
  },
  methods: {
    toggleSelectAll() {
      this.$router.push("/type");
    },
  },
};
</script>

<style scoped>
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
button:hover {
  color: #f4a46f;
  background-color: #f0f9eb;
}
.category-nav {
  background-color: #f4efd2;
  padding: 15px 0;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.category-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  justify-content: center;
}
.category-nav li {
  margin-right: 20px;
}
.category-nav a {
  text-decoration: none;
  color: #606266;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}
.category-nav a:hover {
  color: #f4a46f;
  background-color: #f0f9eb;
}
</style>
